<template>
  <div style="height: 100%; width: 100%; position: relative" ref="maindev">
    <div class="pagetop">
      <div style="width: 100%">
        <table style="font-size: 12px; white-space: nowrap" border="0" class="table1style">
          <tr>
            <td align="right">标本日期</td>
            <td style="width: 280px">
              <table style="border-spacing: 0px; width: 100%">
                <tr>
                  <td style="padding: 0px">
                    <el-date-picker v-model="txtstartdate" :able="false" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd" style="width: 100%; min-width: 100px" :picker-options="pickerOptions"
                      :clearable="false" :key="startkey"> </el-date-picker>
                  </td>
                  <td>至</td>
                  <td style="padding: 0px">
                    <el-date-picker v-model="txtenddate" type="date" :able="false" placeholder="选择日期"
                      value-format="yyyy-MM-dd" style="width: 100%; min-width: 100px" :picker-options="pickerOptions"
                      :clearable="false" :key="endkey"> </el-date-picker>
                  </td>
                </tr>
              </table>
            </td>
            <td align="right">检验院区</td>
            <td>
              <rm-ddl-common datatype="hospital" dataname="检验院区" v-model="hospcode" width="100%"
                :disabled="this.isareamode == '1'" @change="hospChange"></rm-ddl-common>
            </td>
            <td align="right">检验科室</td>
            <td>
              <rm-ddl-common datatype="labdept" dataname="检验科室" v-model="labdeptval" width="100%"
                @change="labdeptChange"></rm-ddl-common>
            </td>

            <td style="width: 80px">
              <!--  -->
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_hospcode"
                @change="chkevent($event, 'chk_hospcode', '检验院区')">检验院区</el-checkbox>
            </td>
            <td>
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_labdeptcode"
                @change="chkevent($event, 'chk_labdeptcode', '检验科室')">检验科室</el-checkbox>
              <!--  -->
            </td>
            <td style="width: 80px">
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_report_user"
                @change="chkevent($event, 'chk_report_user', '检验医生')">检验医生</el-checkbox>
            </td>

            <td style="width: 40px">
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_years"
                @change="chkevent($event, 'chk_years', '年')">年</el-checkbox>
            </td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td align="right">报告单元</td>
            <td>
              <rm-ddl-rptunit prgno="LIS440" v-model="rptunit" width="100%" clearable
                @change="rptunitChange"></rm-ddl-rptunit>
            </td>
            <td align="right">申请科室</td>
            <td>
              <rm-ddl-common datatype="dept" dataname="科室" v-model="reqdeptno" width="100%"
                @change="reqdeptChange"></rm-ddl-common>
            </td>
            <td align="right">检验组别</td>
            <td>
              <rm-ddl-common v-model="labgroupid" clearable filterable :appendtobody="true" visible-change:true
                datatype="labgroup" dataname="检验组别" width="100%" @change="labgroupChange"></rm-ddl-common>
            </td>

            <td>
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_labgroupid"
                @change="chkevent($event, 'chk_labgroupid', '检验组别')">检验组别</el-checkbox>
            </td>
            <td>
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_rechk_user"
                @change="chkevent($event, 'chk_rechk_user', '核对医生')">核对医生</el-checkbox>
              <!--  -->
            </td>
            <td>
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_pat_typecode"
                @change="chkevent($event, 'chk_pat_typecode', '病人类型')">病人类型</el-checkbox>
            </td>
            <td>
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_months"
                @change="chkevent($event, 'chk_months', '月')">月</el-checkbox>
            </td>
            <td></td>
          </tr>

          <tr>
            <td align="right">报告单元组合</td>
            <td>
              <el-select v-model="unitgroup"
                @dblclick.native="popMultipleChk(unitgroup, 'unitgroup', rptunitGroupOption, '单元组合选择')"
                style="width: 100%" filterable clearable>
                <el-option v-for="(item, index) in rptunitGroupOption" :key="index" :value="item.data"
                  :label="item.display"> </el-option>
              </el-select>
            </td>
            <td align="right">病人类型</td>
            <td><rm-ddl-common datatype="seccode" kindno="PT" dataname="病人类型" v-model="pattype" key="pt"
                @change="pattypeChange"></rm-ddl-common></td>
            <td></td>
            <td>
            </td>

            <td>
              <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_rptunitid"
                @change="chkevent($event, 'chk_rptunitid', '报告单元')">报告单元</el-checkbox>
            </td>
            <td></td>
            <td></td>
            <td><el-checkbox true-label="1" false-label="0" v-model="chklist.chk_days"
                @change="chkevent($event, 'chk_days', '日')">日</el-checkbox></td>
            <td></td>
          </tr>

        </table>
        <div class="operation-list">
          <el-button @click.native="BtnQuery" v-has="'PINQUERY'" type="primary" icon="el-icon-search">查询</el-button>
          <el-button @click.native="BtnClear" icon="el-icon-close">清除</el-button>
          <el-button @click.native="BtnExport" icon="el-icon-download">导出</el-button>
        </div>
      </div>
    </div>
    <div class="pagecenter">
      <div class="middle-center">
        <vxe-table :data.sync="tableData" :select-config="{ reserve: true }" :edit-config="{
          trigger: 'click',
          mode: 'cell',
          showStatus: true,
          activeMethod: activeMethod,
          showIcon: false,
        }" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column
          highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe
          show-header-overflow :optimization="{ animat: false }" header-align="center" :key="xTablekey" show-footer
          :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName" :loading="xTableLoading">
          <vxe-table-column type="index" title="NO." width="50" header-align="center" align="center"></vxe-table-column>
          <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable
            v-for="items in tableColumn" :formatter="formatFun"></vxe-table-column>
          <vxe-table-column field="total_count" sortable title="样本数" width="70" header-align="center"
            align="right"></vxe-table-column>
          <vxe-table-column field="ca_count" sortable title="CA使用数" width="85" header-align="center"
            align="right"></vxe-table-column>
          <vxe-table-column field="ca_rate" sortable title="CA使用率%" width="85" header-align="center"
            align="right"></vxe-table-column>
        </vxe-table>
      </div>
    </div>


  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import rmLayoutRight from "../../../rmcompents/rm-layout-right.vue";
export default {
  components: { rmLayoutRight },
  name: "LIS635",
  data() {
    const _that = this;
    return {
      chklist: {},
      xTableLoading: false,
      option1: [],
      option2: [],
      fieldname: "",
      tableColumn: [],
      tableData: [],
      xTablekey: 0,
      multichktitle: "",
      pattypeOption: [],
      labdeptOption: [],
      hospOption: [],
      docOption: [],
      rptunitOption: [],
      rptunitGroupOption: [],
      labgroupOption: [],
      infocode: "",
      infoitem: "",
      //以下为查询条件
      hospcode: "", //检验院区
      labdeptval: "", // 检验科室
      rptunit: "", // 报告单元
      reqdeptno: "", //申请科室
      labgroupid: "", // 检验组
      pattype: "", // 病人类型
      unitgroup: "", //报告单元组合
      //以下为统计项目
      chklist: {
        chk_hospcode: false, // 检验院区
        chk_labdeptcode: false, // 检验科室
        chk_report_user: false, // 检验医生
        chk_labgroupid: false, // 检验组别
        chk_rechk_user: false, // 核对医生
        chk_pat_typecode: false, // 病人类型
        chk_rptunitid: false, // 报告单元
        chk_years: false,
        chk_months: false,
        chk_days: false,
      },
      txtstartdate: new Date(),
      txtenddate: new Date(),
      chkcnt: 0,
      startkey: 0,
      endkey: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
              _that.txtstartdate = new Date();
              _that.txtenddate = new Date();
            },
          },
        ],
      },
      selrow: [],
      dialogDetailVisible: false,
      rpttableColumn: [],
      rptdetailColumn: [],
      rpttabledata: [],
      rptdetailtabledata: [],
      isareamode: "0",
      exportTableColLen: 0,
      hospname: "",
      labdeptname: "",
      rptunitname: "",
      reqdeptname: "",
      labgroupname: "",
      pattypename: "",
    };
  },
  created() {
    this.initOption();
  },
  mounted() { },
  updated() { },
  methods: {
    popMultipleChk(e, fieldname, option, title) {
      let temp = XEUtils.clone(option, true);
      this.option1 = [];
      this.option2 = [];
      if (e != "") {
        let k = e.split(",");
        k.forEach((item) => {
          let ndata = temp.find((m) => m.data == item);
          if (ndata != undefined && ndata != null) {
            this.option2.push(ndata);
          }
        });
        temp.forEach((item) => {
          if (k.indexOf(item.data + "") < 0) {
            this.option1.push(item);
          }
        });
      } else {
        this.option1 = temp;
      }
      this.fieldname = fieldname;
      this.multichktitle = title;

    },
    closedialog(value, name) {
      if (value != "close") {
        this[name] = value;
      }

    },
    async initOption() {
      try {
        const res = await this.$tool.request({
          url: "LIS/LIS6/LIS635",
          method: "post",
          data: {
            action: "initOption",
          },
        });

        this.pattypeOption = res.pattypeOption;
        this.labdeptOption = res.labdeptOption;
        this.rptunitOption = res.rptunitOption;
        this.labgroupOption = res.labgroupOption;
        this.rptunitGroupOption = res.rptunitGroupOption;
        this.hospOption = res.hospOption;
        this.docOption = res.docOption;
        this.hospcode = res.currenthospcode;
        this.isareamode = res.isareamode;
      } catch (e) {
        this.$message.warning(e);
      }
    },
    BtnQuery() {
      this.InitPage();
    },
    BtnClear() {
      this.hospcode = ""; //检验院区
      this.labdeptval = ""; // 检验科室
      this.rptunit = ""; // 报告单元
      this.reqdeptno = ""; //申请科室
      this.labgroupid = ""; // 检验组
      this.pattype = ""; // 病人类型
      this.unitgroup = ""; //报告单元组合
      this.infoitem = "";
      this.infocode = "";
      this.tableData = [];
      this.chklist = {
        chk_hospcode: false, // 检验院区
        chk_labdeptcode: false, // 检验科室
        chk_report_user: false, // 检验医生
        chk_labgroupid: false, // 检验组别
        chk_rechk_user: false, // 核对医生
        chk_pat_typecode: false, // 病人类型
        chk_rptunitid: false, // 报告单元
        chk_years: false,
        chk_months: false,
        chk_days: false,
      };
      this.chkcnt = 0;
    },
    chkevent(e, code, name) {
      if (e == "1") {
        if (this.chkcnt <= 7) {
          this.chkcnt++;
          if (this.infocode.indexOf(code) == -1) {
            this.infocode += code + ",";
            this.infoitem += name + ",";
          }
        } else {
          this.$alert("不能选择更多的分组！", "提示");
          this.chklist[code] = false;
          //console.log(this, this[code]);
        }
      } else {
        if (this.infocode.indexOf(code) > -1) {
          this.chkcnt--;
          this.infocode = this.infocode.replace(code, "");
          this.infoitem = this.infoitem.replace(name, "");
        }
      }
    },
    async InitPage() {
      try {
        if (this.chkcnt < 1) {
          this.$alert("请勾选右边分组条件！", "信息");
          return false;
        }
        this.xTableLoading = true;
        const response = await this.$tool.request({
          url: "LIS/LIS6/LIS635",
          method: "post",
          timeout: 600000,
          data: {
            action: "queryData",
            startdate: this.txtstartdate, //标本开始日期
            enddate: this.txtenddate, //标本结束日期
            labdeptval: this.labdeptval, // 检验科室
            hospcode: this.hospcode, // 检验院区
            rptunit: this.rptunit, // 报告单元
            pattype: this.pattype, // 病人类型
            labgroupid: this.labgroupid, // 检验组
            unitgroup: this.unitgroup, //报告单元组合
            reqdeptno: this.reqdeptno, // 申请科室
            infocode: this.infocode, //要查询的列数
            infoitem: this.infoitem,
          },
        });
        if (!!response.RData.Data) {
          this.tableColumn = response.RData.Cols;
          this.tableData = response.RData.Data;
          this.xTableLoading = false;
        } else {
          // this.InitPage();
          this.$message.warning("查询超时,可以尝试缩短签收日期或减少分组条件！");
          this.xTableLoading = false;
        }
      } catch (e) {
        this.xTableLoading = false;
        this.$alert(e, "消息");
      }
    },
    formatFun({ cellValue, column, row }) {
      return this.retForamtVal(cellValue, column.property);
    },
    retForamtVal(cellValue, column) {
      if (["labdeptcode"].includes(column)) {
        try {
          //科室
          let deptname = this.labdeptOption.find((m) => m.data == cellValue);
          if (deptname != undefined && deptname != null) {
            return deptname.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "pat_typecode") {
        // 病人类型
        try {
          let pattypename = this.pattypeOption.find((m) => m.data == cellValue);
          if (pattypename != undefined && pattypename != null) {
            return pattypename.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "labgroupid") {
        //检验工作组
        try {
          let labgroup = this.labgroupOption.find((m) => m.data == cellValue);
          if (labgroup != undefined && labgroup != null) {
            return labgroup.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "rptunitid") {
        // 报告单元
        try {
          let rptunit = this.rptunitOption.find((m) => m.data == cellValue);
          if (rptunit != undefined && rptunit != null) {
            return rptunit.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "hospcode") {
        // 检验院区
        try {
          let hospital = this.hospOption.find((m) => m.data == cellValue);
          if (hospital != undefined && hospital != null) {
            return hospital.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "report_user") {
        // 检验医生
        try {
          let reportuser = this.docOption.find((m) => m.data == cellValue);
          if (reportuser != undefined && reportuser != null) {
            return reportuser.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "rechk_user") {
        // 核对医生
        try {
          let rechkuser = this.docOption.find((m) => m.data == cellValue);
          if (rechkuser != undefined && rechkuser != null) {
            return rechkuser.display;
          } else {
            return cellValue;
          }
        } catch {
          return cellValue;
        }
      } else if (column == "emer_flag") {
        if (cellValue == "1") {
          return "急";
        } else {
          return "非急";
        }
      } else {
        return cellValue;
      }
    },
    footerCellClassName({ $rowIndex, column, columnIndex }) {
      if (columnIndex === 0 || ["total_count", "ca_count", "ca_rate"].includes(column.property)) {
        if ($rowIndex === 0) {
          return "col-blue";
        } else {
          return "col-red";
        }
      }
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "总计";
          }
          if (["total_count", "ca_count"].includes(column.property)) {
            return XEUtils.sum(data, column.property);
          }

          if (["ca_rate"].includes(column.property)) {
            if (this.tableData.length > 0) return Number((this.SumAll(this.tableData, "ca_count") / this.SumAll(this.tableData, "total_count")) * 100).toFixed(2) + "%";
            else return "0%";
          }

          return null;
        }),
      ];
    },

    SumAll(data, property) {
      var plus = 0;
      if (data) {
        for (let i = 0, len = data.length; i < len; i++) {
          plus += data[i][property] - 0;
        }
      }

      return plus;
    },
    hospChange(code, name) {
      this.hospcode = code;
      this.hospname = name;
    },
    labdeptChange(code, name) {
      this.labdeptval = code;
      this.labdeptname = name;
    },
    rptunitChange(code, name) {
      this.rptunit = code;
      this.rptunitname = name;
    },
    reqdeptChange(code, name) {
      this.reqdeptno = code;
      this.reqdeptname = name;
    },
    labgroupChange(code, name) {
      this.labgroupid = code;
      this.labgroupname = name;
    },
    pattypeChange(code, name) {
      this.pattype = code;
      this.pattypename = name;
    },
    //导出
    BtnExport() {
      let data = this.getExportData();
      let filtertxt = this.getExportFilter();
      this.$pub.exportTableExcelWithData(data, this.exportTableColLen, "LIS635 报告CA使用率统计.xlsx", filtertxt, "统计条件：");
    },
    // 获取当前导出文件的所有查询条件
    getExportFilter() {
      let filtertxt = "标本日期:" + XEUtils.toDateString(this.txtstartdate, "yyyy-MM-dd") + "至" + XEUtils.toDateString(this.txtenddate, "yyyy-MM-dd") + "; ";
      if (this.hospcode) filtertxt += "检验院区:" + this.hospname + "; ";
      if (this.labdeptval) filtertxt += "检验科室:" + this.labdeptname + "; ";
      if (this.rptunit) filtertxt += "报告单元:" + this.rptunitname + "; ";
      if (this.reqdeptno) filtertxt += "申请科室:" + this.reqdeptname + "; ";
      if (this.labgroupid) filtertxt += "检验组别:" + this.labgroupname + "; ";
      if (this.unitgroup) filtertxt += "报告单元组合:" + this.getOptionName(this.rptunitGroupOption.filter((item) => ("," + this.unitgroup + ",").indexOf("," + item.data + ",") > -1)) + "; ";
      if (this.pattype) filtertxt += "病人类型:" + this.pattypename + "; ";
      let tatcoltxt = "";
      if (this.chklist.chk_hospcode == "1") tatcoltxt += "检验院区、";
      if (this.chklist.chk_labdeptcode == "1") tatcoltxt += "检验科室、";
      if (this.chklist.chk_report_user == "1") tatcoltxt += "检验医生、";
      if (this.chklist.chk_labgroupid == "1") tatcoltxt += "检验组别、";
      if (this.chklist.chk_rechk_user == "1") tatcoltxt += "核对医生、";
      if (this.chklist.chk_pat_typecode == "1") tatcoltxt += "病人类型、";
      if (this.chklist.chk_rptunitid == "1") tatcoltxt += "报告单元、";
      if (this.chklist.chk_years == "1") tatcoltxt += "年、";
      if (this.chklist.chk_months == "1") tatcoltxt += "月、";
      if (this.chklist.chk_days == "1") tatcoltxt += "日、";
      if (tatcoltxt) filtertxt += "统计项目:" + tatcoltxt.substring(0, tatcoltxt.length - 1) + "; ";
      return filtertxt;
    },
    getOptionName(option) {
      if (option && option.length > 0) {
        let optionname = "";
        option.forEach((item) => {
          if (item.hasOwnProperty("display")) {
            optionname += item.display + ",";
          } else {
            optionname += item.label + ",";
          }
        });
        return optionname.substring(0, optionname.length - 1);
      } else {
        return "";
      }
    },
    getExportData() {
      let datas = this.$refs.xTable.afterFullData;
      let exportColumn = XEUtils.clone(this.tableColumn, true);
      exportColumn.push({ title: "样本数", field: "total_count" });
      exportColumn.push({ title: "CA使用数", field: "ca_count" });
      exportColumn.push({ title: "CA使用率", field: "ca_rate" });
      this.exportTableColLen = exportColumn.length;
      let columns = exportColumn.filter((item) => item.field);
      let footerData = {};
      columns.forEach((item, index) => {
        if (index === 0) {
          footerData[item.field] = "总计";
        }
        if (["total_count", "ca_count"].includes(item.field)) {
          footerData[item.field] = XEUtils.sum(datas, item.field);
        }

        if (["ca_rate"].includes(item.field)) {
          if (this.tableData.length > 0) footerData[item.field] = Number((this.SumAll(this.tableData, "ca_count") / this.SumAll(this.tableData, "total_count")) * 100).toFixed(2) + "%";
          else footerData[item.field] = "0%";
        }
      });
      datas.splice(datas.length, 0, footerData);
      let headers = [columns.map((item) => item.title)];
      return headers.concat(
        datas.map((row) => {
          return columns.map((column) => {
            return this.retForamtVal(row[column.field], column.field);
          });
        })
      );
    },
    toBuffer(wbout) {
      let buf = new ArrayBuffer(wbout.length);
      let view = new Uint8Array(buf);
      for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xff;
      return buf;
    },

    activeMethod({ row, column }) {
      return true;
    },


  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
  height: 150px;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 155px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}

.el-checkbox__label {
  padding: 0px;
}

.left_nav {
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 0px 0px 0px 0px;
  float: left;
  display: inline;
}

.left_nav div {
  cursor: pointer;
  height: 40px;
  width: 100%;
  float: left;
  padding-left: 20px;
  line-height: 40px;
}

.left_nav .active {
  background-color: DeepSkyBlue;
}

.divwidth {
  width: 50px !important;
}

.right_nav {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
  display: inline;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
}

/deep/ .mytable-style .vxe-footer--column.col-blue {
  color: blue !important;
  font-weight: bold;
}

/deep/ .mytable-style .vxe-body--row.row-blue {
  color: blue !important;
  font-weight: bold;
}

/deep/ .el-icon-time {
  line-height: 18px !important;
}

/deep/ .el-range__close-icon {
  line-height: 18px !important;
}

/deep/ .el-range-editor--small .el-range-separator {
  line-height: 17px !important;
}

/deep/ .mychkclass .el-checkbox {
  margin-right: 15px;
}

.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}

::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}

/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 4px 4px 4px 0;
  border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
  background-color: #000000;
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}

/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 4px 0 4px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
  background-color: #000000;
}

::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}</style>
